<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
</head>

<body>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .goodWarmp {
            width: 500px;
            display: flex;
            justify-content: left;
            border: 1px dashed black;
        }
        
        .goodWarmp img {
            width: 80px;
        }
        
        .goodWarmp>div:last-child {
            text-align: left;
        }
        
        .detail {
            width: 200px;
            height: 200px;
            background-color: #cccccc;
            position: fixed;
            right: 10px;
            top: 100px;
            border: 2px solid black;
        }
    </style>


    </head>

    <body>
        <div id="box">
            <film-item v-for="(good,index) in dataList" :key="good.id" :good="good"></film-item>
            <!-- 使用组件显示详情信息
            detailmsg:接收从filmItem组件传递过来的数据
        -->
            <detail></detail>
        </div>

        <script>
            var bus = new Vue();
            //创建组件filmItem,用于渲染商品列表界面
            Vue.component("filmItem", {
                    template: `
                <div class="goodWarmp">
                    <div>
                        <img :src="good.img.split('/w.h').join('')"/>
                    </div>
                    <div>
                        <h2>{{good.nm}}</h2>
                        <p>
                            电影评分：<span>{{good.sc}}</span>
                        </p>
                        <p>
                            主要演员：<span>{{good.star}}</span>
                        </p>
                        <p>
                            <button @click="getDetail">详情</button>
                        </p>
                    </div>
                </div>
            `,
                    //通过组件中的自定义属性mydata接收父组件传递过来的数据
                    props: ["good"],
                    methods: {
                        getDetail() { //点击获取详情信息
                            //详情信息，需要传递到非父子组件showDetail中
                            //先传递给父组件，再由父组件传递给showDetail，父组件类似于一个中转站，起到了一个中间人的作用
                            bus.$emit("myevent", this.good.showInfo);
                        }
                    }
                })
                //创建详情显示组件
            Vue.component("detail", {
                template: `
                <div class="detail">{{detailinfo ? detailinfo : "点击显示详情信息"}}</div>
            `,
                data() {
                    return　 {
                        detailinfo: ""
                    }
                },
                mounted() {
                    bus.$on("myevent", data => {
                        this.detailinfo = res.data
                    })
                }
            })


            const vm = new Vue({
                el: "#box",
                data: {
                    //保存商品列表数据
                    dataList: [],

                },
                methods: {
                    handleAjax() {
                        axios("data.json").then(res => {
                            //请求获取数据
                            // console.log(res.movieList)
                            //将数据保存在模型状态下
                            this.dataList = res.data
                        })
                    }
                },
                mounted() {
                    this.handleAjax()

                }
            })
        </script>


    </body>

</html>